import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'react-router-redux'
import { Breadcrumb } from 'semantic-ui-react'

class Nav extends Component {
  parsingFolder = (path, go) => {
    console.log('parsingFolder', path)
    if (path === '') {
      return <Breadcrumb.Divider />
    }
    const folderArray = path.split('/')
    let folderPath = ''
    const navSections = folderArray.reduce((pre, next) => {
      if (next !== '') {
        folderPath += `/${next}`
        pre.push({ name: next, path: folderPath })
      }
      pre.push('/')
      return pre
    }, [])
    return navSections.map((section, i) => {
      if (section === '/') {
        return <Breadcrumb.Divider key={i} />
      }
      return (
        <Breadcrumb.Section link key={i} onClick={() => go(section.path)}>
          {section.name}
        </Breadcrumb.Section>
      )
    })
  }

  render() {
    const { path, go } = this.props
    return (
      <Breadcrumb size="large">
        <Breadcrumb.Section link onClick={() => go('')}>
          首页
        </Breadcrumb.Section>
        <Breadcrumb.Divider />
        {this.parsingFolder(path, go)}
      </Breadcrumb>
    )
  }
}

const mapDispatchToProps = {
  go: path => push(`/users${path}`),
}

export default connect(
  null,
  mapDispatchToProps,
)(Nav)
